﻿@using Orchard.Themes.Models
@using Orchard.Themes.Preview
@using Orchard.Themes.Services
@using Orchard.Themes.ViewModels
@{ 
    Script.Require("OrchardTinyMceDeluxe");
    var pluginsBaseUrl = Url.Content("~/modules/tinymcedeluxe/scripts");

    var siteThemeService = WorkContext.Resolve<ISiteThemeService>();
    var themeLocation = siteThemeService.GetSiteTheme().Path;
    var themeCssPath = Url.Content("~/themes/" + themeLocation + "/styles/site.css");
}
@Html.TextArea("Text", (string)Model.Text, 25, 80,
	 new Dictionary<string,object> {
		{"class", "html tinymce"},
		{"data-mediapicker-uploadpath",Model.AddMediaPath},
		{"data-mediapicker-title",T("Insert/Update Media")},
        {"style", "width:100%"}
	 })

@using (Script.Foot()) {
///TODO: Move this into a static shape that is set up from an IShapeTableProvider, that way we 
/// guarantee it will run only once per page. Even though running it more than once per page 
/// shouldn't be a problem, because the PluginBaseUrl and ThemePath properties are 'static' 
/// properties on the TinyMceDeluxe.Orchard class. Set plugin and theme css path via 
/// TinyMceDeluxe.Orchard javascript class static properties. 
<script type="text/javascript">
    TinyMceDeluxe.Orchard.PluginBaseUrl = '@pluginsBaseUrl';
    TinyMceDeluxe.Orchard.ThemePath = '@themeCssPath';
</script>
}

@*
// If using Combinator, and have COmbinator enabled for the dashboardk you might need this exclude setting: tinymcedeluxe\.orchard\.js|tinymcedeluxe\.orchard\.min\.js
////
//// Customizing the TinyMce editor via TinyMceDeluxe:

// From anywhere in your module, add a script block like the one below. Within the 'setupEditor.TinyMceDeluxe' 
// event, customize the 'options' object to your liking. 

@using (Script.Foot()) {
    // This is a test to demonstrate how you can customize the options of the tinyMce editor from 
    // your module without having to override any templates or resources (thanks to Piedone for 
    // providing this nice pattern): 
    <script type="text/javascript">
        (function ($) {
            $(document).on('setupEditor.TinyMceDeluxe', function (values) {
                var options = values.options
                var pluginsList = values.pluginsList;

                // Example 1: 
                // Append a "Bold" button to existing toolbar: 
                //options['theme_advanced_buttons2'] += ",|,bold";

                /// Example 2: 
                // Replace the 3rd toolbar row with a custom one: 
                //options['theme_advanced_buttons3'] = "bold,italic"
                
                /// Example 3: 
                // Add 'syntaxhl' to the list of plugins to be loaded, and add syntaxhl button to the tinyMCE toolbar:
                options['plugins'] += ',-syntaxhl';
                pluginsList.push('syntaxhl');
                options['theme_advanced_buttons1'] += ',|,syntaxhl';
            }); 
        })(jQuery); 
    </script>
}

// Note: You can still use the old method, overriding orchard-tinymce.js in your module, but the above is now the preferable solution. 
*@
